{#include main}
{#title}Quarkus REST Score Console{/title}

{#style}
collapse-list{
  cursor: pointer;
}
p{
  text-align: right;
  font-size:20px;
}

.scoregauge{
    justify-content: center;
}
.gauge {
  width: 100%;
  max-width: 250px;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  color: #004033;
}

.gauge__body {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  background: #b4c0be;
  position: relative;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  overflow: hidden;
}

.gauge__fill {
  position: absolute;
  top: 100%;
  left: 0;
  width: inherit;
  height: 100%;
  transform-origin: center top;
  transition: transform 0.2s ease-out;
}

.gauge__cover {
  width: 75%;
  height: 150%;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding-bottom: 25%;
  box-sizing: border-box;
}

.scorekey{
  font-weight: bold;
  font-size: 165%;
  font-family: "Roboto", sans-serif;
}

.scoremessage{
  font-size: 90%;
  font-family: "Roboto", sans-serif;
  display: block;
  text-align: center;
  padding: 15px;
}
th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
table {
  position: relative;
  margin: 10px auto;
  padding: 0;
  width: 100%;
  height: auto;
  border-collapse: collapse;
  text-align: center;
}
code{
  float: left;
  font-size: 80%;
}
.styleBadge{
  float: right;
}

.btn{
  min-width: 100%;
}
.accordion{
  align: center;
  width: 99%;
  margin-top: 2%;

}

.showfilters {
    cursor: pointer;
}

.filterbox{
    font-size: 0.9em;
    background: #343a40;
    color: white;
}

{/style}
{#script}
function setGaugeValue(gauge, value) {
    if (value < 0 || value > 100) {
        return;
    }

    var r;
    if(value < 50){
      r = "transform:rotate( " + value*2 + "grad);background: #DE4E46;";
    }else if(value < 100){
      r = "transform:rotate( " + value*2 + "grad);background: #F7C00F;";
    }else{
      r = "transform:rotate( " + value*2 + "grad);background: lightgreen;";
    }

    gauge.find(".gauge__fill").attr("style",r);
    gauge.find(".gauge__cover").text(value + "%");
}

$(document).ready(function(){
    $(".gauge").each(function(){
        setGaugeValue($(this), $(this).attr("data-score"));
    });
});

{/script}

{#body}
<div class="accordion" id="endpointsAccordion">
{#for endpoint in info:endpointScores.endpoints}

    <div class="card">

        <div class="card-header" id="Heading{endpoint_count}">
            <button class="btn btn-block btn-lg collapsed" type="button" data-toggle="collapse"
                    data-target="#Line{endpoint_count}" aria-expanded="false"
                    aria-controls="Line{endpoint_count}">
              <code>{endpoint.httpMethod} {endpoint.fullPath}</code>
              <span class="styleBadge badge badge-{#if endpoint.score < 50}danger{#else if endpoint.score < 100}warning{#else}success{/if}">{endpoint.score}/100</span>
            </button>
        </div>

        <div id="Line{endpoint_count}" class="collapse" aria-labelledby="Heading{endpoint_count}" data-parent="#endpointsAccordion">
            <div class="card-body">

                <div class="row">
                    {#for diagnosticEntry in endpoint.diagnostics.entrySet()}
                        {#for diagnostic in diagnosticEntry.value}
                            <div class="col-4">
                                <div class="row scoregauge">
                                    <div class="gauge" data-score="{diagnostic.score}">
                                        <div class="gauge__body">
                                            <div class="gauge__fill"></div>
                                            <div class="gauge__cover"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row scoregauge scorekey">
                                    {diagnosticEntry.key}
                                </div>

                                <div class="row scoremessage">
                                    {diagnostic.message}
                                </div>
                            </div>
                        {/for}
                    {/for}
                </div>

                <hr/>
                
                <div class="row">
                    {#if !endpoint.produces.isEmpty()}
                        <div class="col-2" style="text-align: right;">
                            Produces:
                        </div>
                        <div class="col-10">
                            <span class="badge badge-primary">{endpoint.produces}</span>
                        </div>
                    {/if}
                    {#if !endpoint.consumes.isEmpty()}

                        <div class="col-2" style="text-align: right;">
                            Consumes:
                        </div>
                        <div class="col-10">
                            <span class="badge badge-primary">{endpoint.consumes}</span>
                        </div>
                    {/if}
                    {#if !endpoint.requestFilterEntries.isEmpty()}
                        <div class="col-2 showfilters" style="text-align: right;" data-toggle="collapse" data-target="#filter{endpoint_count}">
                            Filters:
                        </div>
                        <div class="col-10 showfilters" data-toggle="collapse" data-target="#filter{endpoint_count}">
                            <span class="badge badge-pill badge-secondary">{endpoint.requestFilterEntries.size}</span>
                        </div>
                    
                        <div id="filter{endpoint_count}" class="col-10 offset-2 filterbox collapse">
                            <samp class="text-wrap">
                                {#for requestFilters in endpoint.requestFilterEntries}
                                    {requestFilters.getName}<br/>
                                {/for}
                            </samp>
                            
                        </div>
                    {/if}
                    <div class="col-2" style="text-align: right;">
                        Resource Class:
                    </div>
                    <div class="col-10">
                        <a class="text-primary" onclick="openInIDE('{endpoint.className}')">{endpoint.className}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/for}
</div>
{/body}
{/include}
